<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>消费者管理</el-breadcrumb-item>
        <el-breadcrumb-item>消费次数</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <!--顶部-->
        <el-row style="padding-bottom: 10px;text-align: left">
          <el-input placeholder="ktv名称" v-model="selectkey" class="input-with-select" style="width: 200px">
          </el-input>
          <el-button type="primary" @click="getstart()">搜索</el-button>
        </el-row>
        <!--表格-->
        <el-table
          border
          align="left"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="ordernum"
            label="订单号">
          </el-table-column>
          <el-table-column
            prop="people"
            label="	预定人数">
          </el-table-column>
          <el-table-column
            prop="shop_name"
            label="ktv名称">
          </el-table-column>
          <el-table-column
            label="包房类型">
            <template slot-scope="scope">
              {{ roomType[scope.row.room_type] }}
            </template>
          </el-table-column>
          <el-table-column
            label="订单状态">
            <template slot-scope="scope">
              {{ stateType[scope.row.state] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="预定价格">
          </el-table-column>
          <el-table-column
            prop="operate"
            label="核销人姓名">
          </el-table-column>
          <el-table-column
            prop="commodity_name"
            label="	商品名称">
          </el-table-column>
          <el-table-column
            label="下单时间">
            <template slot-scope="scope">
              {{ toDate(scope.row.addtime) }}
            </template>
          </el-table-column>
          <el-table-column
            label="预定开始时间">
            <template slot-scope="scope">
              {{scope.row.start_time}}
            </template>
          </el-table-column>
          <el-table-column
            label="	预定结束时间">
            <template slot-scope="scope">
              {{scope.row.over_time}}
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row style="margin-top: 20px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" align="right">
            <el-pagination
              style="text-align: right"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal">
            </el-pagination>
          </el-col>
        </el-row>
      </el-row>
    </el-row>
  </div>
</template>

<script>

  export default {
    name: "clientTimes",
    activated() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      this.getstart()
    },
    data() {
      return {
        tableData: [],
        pageSize: 10,
        currentPage: 1,
        dataTotal: 0,
        roomType: {1: '中小包', 2: '大包', 3: '豪包'},
        stateType: {1: '未使用', 2: '进行中', 3: '待评价', 4: '已评价', 5: '已取消'},
        selectkey: '',
      }
    },
    methods: {
      //绑定表格数据，分页
      getstart() {
        let thi = this
        const prams = {
          page: thi.currentPage, /*当前页码*/
          pageSize: thi.pageSize, /*每页显示多少条数据*/
          user_id: thi.$route.params.data,
          key: thi.selectkey,
        }
        thi.mySelectAll('userOrderList', prams).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },
      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getstart()
      },
      //分页
      handleCurrentChange(val) {
        this.currentPage = val
        this.getstart()
      },
    }
  }

</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
</style>

